<template>
  <div class="video-wrap-map">
    <div class="container cruise-video">
      <live-player
        style="width:100%;height:100%;"
        :id="'videoId' + id"
        :video-url="videoUrl"
        :live="true"
        aspect="fullscreen"
        autoplay
        controls
      ></live-player>

      <div class="btn-wrap">
        <div class="stop-btn" @click="stopFn()">
          <img src="@/assets/img/video-stop2.png" title="停止" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//https://github.com/livegbs/liveplayer-vc/blob/master/src/components/LivePlayerDemo.vue
export default {
  name: "video-map-wrap",
  props: {
    url: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      player: null,
      //videoUrl: "https://mister-ben.github.io/videojs-flvjs/bbb.flv",
      videoUrl: "",
      show: false,
      id: Math.floor(Math.random() * 10000),
    };
  },
  components: {},
  computed: {},
  mounted() {
    //   console.log(this.url);
    // var player = document.getElementById("videoId" + this.id);
    // this.player = player;
  },
  methods: {
    //单个停止
    stopFn() {
      this.player.setAttribute("video-url", "");
      // this.videoUrl == "";
    },
  },
  watch: {
    url(_new, _old) {
      //console.log(_new);
      this.videoUrl = _new;
    },
  },

  beforeDestory() {
    this.videoUrl == "";
  },
};
</script>

<style scoped>
.video-wrap-map {
  width: 100%;
  height: 100%;
  z-index: 999 !important;
}
.container {
  width: 100%;
  height: 100%;
  position: relative;
}
#videoId {
  width: 100%;
  height: 100%;
}
.btn-wrap {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.stop-btn {
  cursor: pointer;
}
.stop-btn img {
  width: 70%;
  height: 70%;
}
</style>
